<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板</title>
  <style>
    body {
      background: #5f9ea0;
      height: 100%;
      margin-bottom: 50px;
    }

    .container {
      display: flex;
      justify-content: center
    }

    .comment-box {
      width: 85%;
      margin-top: 50px;
      background: #fff;
      padding: 5px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      border-radius: 5px;
    }

    input[type="text"],
    textarea {
      margin: 5px 10px;
      outline: none;
      background: #efefef;
      border: 0;
      padding: 10px;
      border-radius: 5px;
    }

    input[type="text"] {
      width: 50%;
      margin-bottom: 15px;
    }

    textarea {
      resize: none;
      width: 85%;
    }

    .header {
      margin: 15px 20px;
      font-size: 27px;
      font-weight: 600;
    }

    button {
      margin: 12px 0 0 10px;
      border: 0;
      color: #fff;
      background: #298d9f;
      padding: 12px 20px 12px 20px;
      transition: all 0.2s ease;
      border-radius: 5px;
    }

    button:hover {
      background: #175763;
    }

    button.close {
      background-color: #28256b;
    }

    input[type="text"]:disabled,
    textarea:disabled {
      background-color: gray;
      cursor: not-allowed;
    }

    h4 {
      margin: 10px 30px;
      /* 文字的大小写字母转换 */
      text-transform: capitalize;
    }

    span.date {
      font-weight: 300;
      font-size: 12px;
      float: right;
      margin-right: 10px;
    }

    hr {
      border: 0;
      height: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .comment-box p {
      margin: 0 30px 15px;
      font-weight: 300;
      color: #333;
      background: #eee;
      padding: 2rem 1rem;
      /* 允许长的单词自动换行 */
      word-wrap: break-word;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="comment-box">
      <button class="close">关闭留言</button>
      <div class="comment-form">
        <div class="header">留言板</div>
        <!-- form 开始 -->
        <div>
          <input type="text" id="name" placeholder="输入你的您的姓名...">
        </div>
        <div>
          <textarea id="comment" cols="30" rows="3" placeholder="请输入您的留言..."></textarea>
        </div>
        <button id="btn-post">留言</button>
      </div>
      <!-- form 结束 -->

      <div>
        <h4 class="header">留言列表</h4>
        <div id="comments">
          <!-- 插入留言 -->
          <!-- <hr>
          <h4>
            <span>姓名</span>
            <span class="date">日期</span>
          </h4>
          <p>留言内容</p> -->
        </div>
      </div>
    </div>
  </div>
  <script>
    /*  
      1.数据初始化
        获取数据：ajax请求
        把数据渲染出来
     */

    const comments = [
      {
        name: "Danny",
        comment:
          "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        time: "Thu Jan 12 2022",
      },
      {
        name: "Jackson",
        comment: "Lorem Ipsum dolor sit amet, consectetur adipiscing elit",
        time: "Thu Jan 11 2022",
      },
    ];

    const commentsBox = document.querySelector('#comments');

  /* 
    2.发布留言功能
      拿到输入框中的内容
      把内容渲染出来
   */

  const nameInput = document.querySelector('#name');
  const commentInput = document.querySelector('#comment');
  const btnSubmit = document.querySelector('#btn-post');
    
  renderComments()


  btnSubmit.onclick = function(){
    // 正则表达式
    let nameStr = nameInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;"); //replace的作用：把前面匹配的规则去找东西，替换成后面的字符串
    let commentStr = commentInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;");
    
    comments.unshift({ //插入一个对象，后面的值是拿到的值
      name :nameStr,
      comment:commentStr,
      time:new Date(),//获取当前时间
    })

    renderComments()
  }

  // 定义函数
  function renderComments(){
      commentsBox.innerHTML = '';
      comments.forEach((item) => {
      console.log(item,name);
      commentsBox.insertAdjacentHTML('beforeend', `
      <hr>
      <h4>
        <span>${item.name}</span>
        <span class="date">${item.time}</span>
      </h4>
        <p>${item.comment}</p>
        `)
    });
    }

    // 关闭留言 开启留言
    const btnClose = document.querySelector('.close')
    let isClosed = false //true:关闭状态 false：开启状态
    btnClose.onclick = function(){
      if (isClosed) {
        btnClose.innerHTML = "关闭留言"
        console.log('关闭状态');
      }else{
        btnClose.innerHTML = "开启留言"
        console.log('开启状态');
      }
      nameInput.disabled = !nameInput.disabled;
      commentInput.disabled = !commentInput.disabled;
      btnSubmit.disabled = !btnSubmit.disabled;
      isClosed = !isClosed
    }

  </script>
</body>

</html>